
<!DOCTYPE html >
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>预览</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <script src="//imgcache.qq.com/open/qcloud/video/vcplayer/TcPlayer-2.2.1.js" charset="utf-8"></script>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <link rel="stylesheet" href="/layui/css/layui.css" media="all">
    <style>
        .toolbar {
            margin-top: 10px;
        }

        .toolbar i {
            font-size: 14px;
            margin-right: 10px;
            cursor: pointer;
        }

        .toolbar i > span {
            margin-left: 5px;
            font-size: 14px;
        }

        .layui-row {
            padding: 5px;
            padding-left: 20px
        }

        .forum-title {
            width: auto;
            margin-left: 80px;
            font-size: 18px;
            font-weight: bold;
        }

        .forum-subtitle {
            width: auto;
            margin-left: 80px;
            color: #aaa;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            box-sizing: border-box;
        }

        .forum-icon {
            width: 64px;
            border-radius: 5px;
            float: left
        }

        .comment-text {
            width: auto;
            margin-left: 40px;
            font-size: 12px;
            padding-left: 10px
        }

        .comment-icon {
            width: 32px;
            border-radius: 16px;
            float: left
        }

        .video {
            width: 100%;
            height: auto;
        }
    </style>
</head>
<body>
<div style="max-width:414px;">

    <div th:if="${content.contentType == 'video'}">
        <div id="video" class="video"></div>
        <!--th:inline="javascript" 通知当前代码块是一个javascript -->
        <script th:inline="javascript">
            var player = new TcPlayer('video', {
                "mp4": [[${video.videoUrl}]], //请替换成实际可用的播放地址
                "autoplay": false,      //iOS下safari浏览器，以及大部分移动端浏览器是不开放视频自动播放这个能力的
                "coverpic" : {"style":"stretch", "src":[[${video.thumb}]]},
                "width": '100%',//视频的显示宽度，请尽量使用视频分辨率宽度
                "height": 'auto'//视频的显示高度，请尽量使用视频分辨率高度
            });
        </script>
    </div>
    <div th:if="${content.contentType == 'gif' || content.contentType == 'image'}">
        <img th:src = "${image.bigUrl}" style="width: 100%">
    </div>

    <div class="layui-row">
        <span style="font-size:16px">[[${content.contentText}]]</span>
    </div>
    <div class="layui-row toolbar " style="padding:5px;padding-left: 20px">
        <i class="layui-icon"><span>[[${fmtPasstime}]]</span></i>
        <i class="layui-icon">&#xe6c6;<span>[[${content.likeCount}]]</span></i>
        <i class="layui-icon">&#xe6c5;<span>[[${content.hateCount}]]</span></i>
        <i class="layui-icon">&#xe641;<span>[[${content.shareCount}]]</span></i>
    </div>

    <div class="layui-row" th:if = "${forum != null}">
        <hr style="height: 5px">

        <img th:src="${forum.logo}" class="forum-icon">
        <div class="forum-title">[[${forum.name}]]</div>
        <div class="forum-subtitle" th:text = "|这个圈子有${forum.userCount}个奇葩,${forum.postCount}个帖子|"></div>
        <div class="forum-subtitle"></div>
    </div>
    <hr style="height: 5px">
    <div class="layui-row">
        <div style="margin-bottom: 20px;">热门评论</div>

        <div th:each="comment,stat : ${comments}">
            <img class="comment-icon"
                 th:src="${comment.header}">
            <div class="comment-text"><b>[[${comment.nickname}]]</b></div>
            <div class="comment-text">[[${comment.comment_text}]]</div>
            <hr>
        </div>

    </div>
</div>

</body>
</html>